<ng-container [ngSwitch]="activeTab">
  <ng-container *ngSwitchCase="'member'">
    <div class="filter" style="position: absolute; right: 20px; top: 5px;">
      <mat-form-field appearance="standard">
        <mat-label>{{ 'enum.FILTER' | translate }}</mat-label>
        <input [formControl]="filter" matInput />
      </mat-form-field>
    </div>
  </ng-container>
  <ng-container *ngSwitchCase="'custom check'">
    <div class="filter" style="position: absolute; right: 20px; top: 5px;">
      <mat-form-field appearance="standard">
        <mat-label>{{ 'enum.FILTER' | translate }}</mat-label>
        <input [formControl]="filter" matInput />
      </mat-form-field>
    </div>
  </ng-container>
  <ng-container *ngSwitchCase="'process profile rules'">
    <div
      style="position: absolute; right: 20px; top: 5px;"
      class="d-flex align-items-center justify-content-end"
    >
      <button
        *ngIf="isWriteGroupAuthorized && cfgType!==CFG_TYPE.FED && cfgType!==CFG_TYPE.GROUND"
        mat-button
        class="mr-2 mt-1"
        [matMenuTriggerFor]="menu"
        aria-label="Action menu"
      >
        <mat-icon>more_vert</mat-icon>
        {{ 'policy.ACTIONS' | translate }}
      </button>
      <mat-menu #menu="matMenu">
        <div>
          <button
            mat-button
            *ngIf="selectedProcessProfileRules && selectedProcessProfileRules.length >= 1 && isWriteGroupAuthorized && isWriteProcessProfileRuleAuthorized"
            (click)="removeProfile(selectedProcessProfileRules)">
            <em class="eos-icons">delete</em>
            {{ 'service.DELETE_RULE' | translate }}
          </button>
        </div>
        <div>
          <button
            mat-button
            *ngIf="selectedProcessProfileRules && selectedProcessProfileRules.length === 1 && isWriteGroupAuthorized && isWriteProcessProfileRuleAuthorized"
            (click)="editProfile(selectedProcessProfileRules)">
            <em class="eos-icons">edit</em>
            {{ 'service.EDIT_RULE' | translate }}
          </button>
        </div>
        <div>
          <button
            mat-button
            *ngIf="isWriteGroupAuthorized && isWriteProcessProfileRuleAuthorized"
            (click)="addProfile()">
            <em class="eos-icons">add</em>
            {{ 'service.ADD_RULE' | translate }}
          </button>
        </div>
      </mat-menu>
      <div class="filter">
        <mat-form-field appearance="standard">
          <mat-label>{{ 'enum.FILTER' | translate }}</mat-label>
          <input [formControl]="filter" matInput />
        </mat-form-field>
      </div>
    </div>
  </ng-container>
  <ng-container *ngSwitchCase="'file access rules'">
    <div
      style="position: absolute; right: 20px; top: 5px;"
      class="d-flex align-items-center justify-content-end"
    >
      <button
        *ngIf="isWriteFileAccessRuleAuthorized || cfgType === CFG_TYPE.GROUND"
        mat-button
        class="mr-2 mt-1"
        [matMenuTriggerFor]="menu"
        aria-label="Action menu"
      >
        <mat-icon>more_vert</mat-icon>
        {{ 'policy.ACTIONS' | translate }}
      </button>
      <mat-menu #menu="matMenu">
        <div>
          <button
            mat-button
            *ngIf="selectedFileAccessRules && isWriteGroupAuthorized && isWriteFileAccessRuleAuthorized"
            (click)="removeProfile(selectedFileAccessRules)">
            <em class="eos-icons">delete</em>
            {{ 'service.DELETE_RULE' | translate }}
          </button>
        </div>
        <div>
          <button
            mat-button
            *ngIf="selectedFileAccessRules && isWriteGroupAuthorized && isWriteFileAccessRuleAuthorized"
            (click)="editProfile(selectedFileAccessRules)">
            <em class="eos-icons">edit</em>
            {{ 'service.EDIT_RULE' | translate }}
          </button>
        </div>
        <div>
          <button
            mat-button
            *ngIf="isWriteGroupAuthorized && isWriteFileAccessRuleAuthorized"
            (click)="addProfile()">
            <em class="eos-icons">add</em>
            {{ 'service.ADD_RULE' | translate }}
          </button>
        </div>
        <div>
          <button
            mat-button
            (click)="showPredefinedRules()"
            *ngIf="cfgType!==CFG_TYPE.FED && cfgType!==CFG_TYPE.CUSTOMER">
            <em class="eos-icons">info</em>
            <span class="text-plain">{{
              'service.PREDEFINED_FILTERS' | translate
            }}</span>
          </button>
        </div>
      </mat-menu>
      <div class="filter">
        <mat-form-field appearance="standard">
          <mat-label>{{ 'enum.FILTER' | translate }}</mat-label>
          <input [formControl]="filter" matInput />
        </mat-form-field>
      </div>
    </div>
  </ng-container>
  <ng-container *ngSwitchCase="'network rules'">
    <div class="filter" style="position: absolute; right: 20px; top: 5px;">
      <mat-form-field appearance="standard">
        <mat-label>{{ 'enum.FILTER' | translate }}</mat-label>
        <input [formControl]="filter" matInput />
      </mat-form-field>
    </div>
  </ng-container>
  <ng-container *ngSwitchCase="'response rules'">
    <div class="filter" style="position: absolute; right: 20px; top: 5px;">
      <mat-form-field appearance="standard">
        <mat-label>{{ 'enum.FILTER' | translate }}</mat-label>
        <input [formControl]="filter" matInput />
      </mat-form-field>
    </div>
  </ng-container>
  <ng-container *ngSwitchCase="'DLP'">
    <div
      style="position: absolute; right: 20px; top: 5px;"
      class="d-flex align-items-center justify-content-end"
    >
      <button
        mat-button
        class="mr-2 mt-1"
        [matMenuTriggerFor]="menu"
        aria-label="Action menu"
      >
        <mat-icon>more_vert</mat-icon>
        {{ 'policy.ACTIONS' | translate }}
      </button>
      <mat-menu #menu="matMenu">
        <button
          mat-button
          *ngIf="cfgType !== CFG_TYPE.GROUND && isWriteDlpAuthorized"
          class="hand"
          (click)="editGroupSensorModal()">
          <em class="eos-icons">edit</em>
          {{ 'group.CONFIG' | translate }}
        </button>
      </mat-menu>
      <div class="filter">
        <mat-form-field appearance="standard">
          <mat-label>{{ 'enum.FILTER' | translate }}</mat-label>
          <input [formControl]="filter" matInput />
        </mat-form-field>
      </div>
    </div>
  </ng-container>
  <ng-container *ngSwitchCase="'WAF'">
    <div
      style="position: absolute; right: 20px; top: 5px;"
      class="d-flex align-items-center justify-content-end"
    >
      <button
        mat-button
        class="mr-2 mt-1"
        [matMenuTriggerFor]="menu"
        aria-label="Action menu"
      >
        <mat-icon>more_vert</mat-icon>
        {{ 'policy.ACTIONS' | translate }}
      </button>
      <mat-menu #menu="matMenu">
        <button
          mat-button
          *ngIf="cfgType !== CFG_TYPE.GROUND && isWriteWafAuthorized"
          class="hand"
          (click)="editGroupSensorModal()">
          <em class="eos-icons">edit</em>
          {{ 'group.CONFIG' | translate }}
        </button>
      </mat-menu>
      <div class="filter">
        <mat-form-field appearance="standard">
          <mat-label>{{ 'enum.FILTER' | translate }}</mat-label>
          <input [formControl]="filter" matInput />
        </mat-form-field>
      </div>
    </div>
  </ng-container>
</ng-container>
<mat-tab-group
  id="group-details"
  *ngIf="!isScoreImprovement; else scoreImprovement"
  animationDuration="0ms"
  [selectedIndex]="groupsService.activeTabIndex"
  (selectedTabChange)="activateTab($event)">
  <mat-tab
    label="{{ 'group.gridHeader.MEMBERS' | translate }}"
  >
    <app-members
      *ngIf="groupsService.activeTabIndex === 0"
      [source]="navSource"
      [members]="members"
      [kind]="kind"
      [resizableHeight]="resizableHeight"
      [useQuickFilterService]="true">
    </app-members>
  </mat-tab>
  <mat-tab
    label="{{ 'group.script.TITLE' | translate }}"
    [labelClass]="(kind==='container' || kind==='node') && cfgType !== CFG_TYPE.FED ? '' : 'hide'"
  >
    <app-custom-check
      *ngIf="groupsService.activeTabIndex === 1 && ((kind==='container' || kind==='node') && cfgType !== CFG_TYPE.FED)"
      [source]="navSource"
      [groupName]="selectedGroupName"
      [cfgType]="cfgType"
      [resizableHeight]="resizableHeight"
      [useQuickFilterService]="true">
    </app-custom-check>
  </mat-tab>
  <mat-tab
    label="{{ 'service.PROCESS_PROFILE' | translate }}"
    [labelClass]="kind==='container' || kind==='node' ? '' : 'hide'"
  >
    <app-process-profile-rules
      *ngIf="groupsService.activeTabIndex === 2 && (kind==='container' || kind==='node')"
      [source]="navSource"
      [groupName]="selectedGroupName"
      [baselineProfile]="baselineProfile"
      [resizableHeight]="resizableHeight"
      [cfgType]="cfgType"
      [useQuickFilterService]="true"
      (getSelectedProcessProfileRules)="getSelectedProcessProfileRules($event)"
      (getRemoveProfile)="getRemoveProfile($event)"
      (getEditProfile)="getEditProfile($event)"
      (getAddProfile)="getAddProfile($event)"
    >
    </app-process-profile-rules>
  </mat-tab>
  <mat-tab
    label="{{ 'service.FILE_PROFILE' | translate }}"
    [labelClass]="kind==='container' ? '' : 'hide'"
  >
    <app-file-access-rules
      *ngIf="groupsService.activeTabIndex === 3 && kind==='container'"
      [source]="navSource"
      [groupName]="selectedGroupName"
      [resizableHeight]="resizableHeight"
      [cfgType]="cfgType"
      [useQuickFilterService]="true"
      (getSelectedFileAccessRules)="getSelectedFileAccessRules($event)"
      (getRemoveProfile)="getRemoveProfile($event)"
      (getEditProfile)="getEditProfile($event)"
      (getAddProfile)="getAddProfile($event)"
      (getShowPredefinedRules)="getShowPredefinedRules($event)"
    >
    </app-file-access-rules>
  </mat-tab>
  <mat-tab
    label="{{ 'service.POLICY_RULES' | translate }}"
  >
    <app-network-rules
      *ngIf="groupsService.activeTabIndex === 4"
      [source]="navSource"
      [groupName]="selectedGroupName"
      [useQuickFilterService]="true"
      [resizableHeight]="resizableHeight">
    </app-network-rules>
  </mat-tab>
  <mat-tab
    label="{{ 'group.RESPONSE_RULES' | translate }}"
  >
    <app-response-rules
      *ngIf="groupsService.activeTabIndex === 5"
      [source]="navSource"
      [groupName]="selectedGroupName"
      [useQuickFilterService]="true"
      [resizableHeight]="resizableHeight">
    </app-response-rules>
  </mat-tab>
  <mat-tab
    label="{{ 'group.dlp.TITLE' | translate }}"
    [labelClass]="kind==='container' && cfgType !== CFG_TYPE.FED ? '' : 'hide'"
  >
    <app-group-dlp
      *ngIf="groupsService.activeTabIndex === 6 && (kind==='container' && cfgType !== CFG_TYPE.FED)"
      (getEditGroupSensorModal)="getEditGroupSensorModal($event)"
      (getToggleDLPConfigEnablement)="getToggleDLPConfigEnablement($event)"
      (getStatus)="getStatus($event)"
      [source]="navSource"
      [groupName]="selectedGroupName"
      [cfgType]="cfgType"
      [useQuickFilterService]="true"
      [resizableHeight]="resizableHeight">
    </app-group-dlp>
  </mat-tab>
  <mat-tab
    label="{{ 'group.waf.TITLE' | translate }}"
    [labelClass]="kind==='container' && cfgType !== CFG_TYPE.FED ? '' : 'hide'"
  >
    <app-group-waf
      *ngIf="groupsService.activeTabIndex === 7 && (kind==='container' && cfgType !== CFG_TYPE.FED)"
      (getEditGroupSensorModal)="getEditGroupSensorModal($event)"
      (getToggleWAFConfigEnablement)="getToggleWAFConfigEnablement($event)"
      (getStatus)="getStatus($event)"
      [source]="navSource"
      [cfgType]="cfgType"
      [groupName]="selectedGroupName"
      [useQuickFilterService]="true"
      [resizableHeight]="resizableHeight">
    </app-group-waf>
  </mat-tab>
</mat-tab-group>
<ng-template #scoreImprovement>
  <mat-tab-group
    animationDuration="0ms"
    (selectedTabChange)="activateTab($event)">
    <mat-tab label="{{ 'service.PROCESS_PROFILE' | translate }}">
      <ng-template matTabContent>
        <app-process-profile-rules
          [source]="navSource"
          [groupName]="selectedGroupName"
          [baselineProfile]="baselineProfile"
          [resizableHeight]="resizableHeight"
          [isScoreImprovement]="isScoreImprovement"
          [cfgType]="cfgType"
        >
        </app-process-profile-rules>
      </ng-template>
    </mat-tab>
    <mat-tab
      label="{{ 'service.FILE_PROFILE' | translate }}"
      *ngIf="kind === 'container'">
      <ng-template matTabContent>
        <app-file-access-rules
          [source]="navSource"
          [groupName]="selectedGroupName"
          [resizableHeight]="resizableHeight"
          [isScoreImprovement]="isScoreImprovement"
          [cfgType]="cfgType"
        >
        </app-file-access-rules>
      </ng-template>
    </mat-tab>
    <mat-tab label="{{ 'service.POLICY_RULES' | translate }}">
      <ng-template matTabContent>
        <app-network-rules
          [source]="navSource"
          [groupName]="getServiceName(selectedGroupName)"
          [resizableHeight]="resizableHeight"
          [isScoreImprovement]="isScoreImprovement">
        </app-network-rules>
      </ng-template>
    </mat-tab>
  </mat-tab-group>
</ng-template>
